<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:winter="http://www.winter.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8"/>
    <title>Escriba-gui</title>
    <link rel="stylesheet" type="text/css" media="all" href="/css/styles.css" th:href="@{/css/styles.css}"/>
    <winter:resources></winter:resources>
    <script type="text/javascript" th:src="@{/js/script.js}"></script>
	<!--SCRIPTS-->
	<!--Slider-in icons-->
	<script type="text/javascript">
		$(document).ready(function() {
			$(".username").focus(function() {
				$(".user-icon").css("left","-45px");
			});
			$(".username").blur(function() {
				$(".user-icon").css("left","0px");
			});
			
			$(".password").focus(function() {
				$(".pass-icon").css("left","-45px");
			});
			$(".password").blur(function() {
				$(".pass-icon").css("left","0px");
			});
		});
	</script>
</head>
<body>
	<div id="wrapper" class="wrapper">
		<header class="header">
				<a th:href="@{'/'}">
					<img class="header-logo" alt="ESCRIBA" src="/images/logo/logo_notario_small.png" th:src="@{/images/logo/logo_notario_small.png}"/>
				</a>
				<h1>
					<a th:href="@{'/'}" class="logo">
						ESCRIBA<span class="subtitulo"></span>
					</a>
				</h1>
		</header>
		<section layout:fragment="content" class="content">
			<div class="error-message" th:text="${beans.systemInfo.errorMessage}" th:if="${beans.systemInfo.systemError}"></div>
			<div id="wrapper" class="login-wrapper">
			    <div class="user-icon"></div>
			    <div class="pass-icon"></div>
			<form id="loginForm" name="login-form" class="login-form" th:object="${authInfo}" th:action="@{'/login'}" th:method="@{'POST'}">
			    <div class="header">
			    	<h1>Ingrese usuario y contraseña</h1>
<!-- 			    	<span>Something below the text.</span> -->
			    </div>
			    <div class="content">
					<input name="username" placeholder="username" type="text" class="input username" value="usuario" onfocus="this.value=''" th:field="*{username}"/>
			    	<input name="password" placeholder="password" type="password" class="input password" value="valve" onfocus="this.value=''" th:field="*{password}"/>
			    </div>
			    <div class="footer">
			   		<input type="submit" name="submit" value="Iniciar Sesión" class="button"/><!--END LOGIN BUTTON-->
			    </div>
			</form>
			</div>
		</section>
		<footer class="footer">
			<p class="footer-text">Escriba Version 1.0</p>
			<img class="footer-logo" alt="Priva" src="/images/logo/logo_notario_small.png" th:src="@{/images/logo/logo_notario_small.png}"/>
		</footer>
	</div>
</body>
</html>